<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件类型</title>
    <style>
        #d1{
            width: 200px;
            height: 200px;
            background-color: blue;
        }
        #sub{
            width: 100px;
            height: 100px;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div id="d1">
        <div id="sub"></div>
    </div>
    <input id="ipt" type="text">
    <p>段落1</p>
    <p>段落2</p>
    <p>段落3</p>
    <p>段落4</p>
    <p>段落5</p>
    <p>段落6</p>
    <p>段落7</p>
    <p>段落8</p>
    <p>段落9</p>
    <p>段落10</p>
    <p>段落11</p>
    <p>段落12</p>
    <p>段落13</p>
    <p>段落14</p>
    <p>段落15</p>
    <p>段落16</p>
    <p>段落17</p>
    <p>段落18</p>
    <p>段落19</p>
    <p>段落20</p>
    <p>段落21</p>
    <p>段落22</p>
    <p>段落23</p>
    <p>段落24</p>
    <p>段落25</p>
    <p>段落26</p>
    <p>段落27</p>
    <p>段落28</p>
    <p>段落29</p>
    <p>段落30</p>
    <p>段落31</p>
    <p>段落32</p>
    <p>段落33</p>
    <p>段落34</p>
    <p>段落35</p>
    <p>段落36</p>
    <p>段落37</p>
    <p>段落38</p>
    <p>段落39</p>
    <p>段落40</p>
    <p>段落41</p>
    <p>段落42</p>
    <p>段落43</p>
    <p>段落44</p>
    <p>段落45</p>
    <p>段落46</p>
    <p>段落47</p>
    <p>段落48</p>
    <p>段落49</p>
    <p>段落50</p>
    <p>段落51</p>
    <p>段落52</p>
    <p>段落53</p>
    <p>段落54</p>
    <p>段落55</p>
    <p>段落56</p>
    <p>段落57</p>
    <p>段落58</p>
    <p>段落59</p>
    <p>段落60</p>
    <p>段落61</p>
    <p>段落62</p>
    <p>段落63</p>
    <p>段落64</p>
    <p>段落65</p>
    <p>段落66</p>
    <p>段落67</p>
    <p>段落68</p>
    <p>段落69</p>
    <p>段落70</p>
    <p>段落71</p>
    <p>段落72</p>
    <p>段落73</p>
    <p>段落74</p>
    <p>段落75</p>
    <p>段落76</p>
    <p>段落77</p>
    <p>段落78</p>
    <p>段落79</p>
    <p>段落80</p>
    <p>段落81</p>
    <p>段落82</p>
    <p>段落83</p>
    <p>段落84</p>
    <p>段落85</p>
    <p>段落86</p>
    <p>段落87</p>
    <p>段落88</p>
    <p>段落89</p>
    <p>段落90</p>
    <p>段落91</p>
    <p>段落92</p>
    <p>段落93</p>
    <p>段落94</p>
    <p>段落95</p>
    <p>段落96</p>
    <p>段落97</p>
    <p>段落98</p>
    <p>段落99</p>
    <p>段落100</p>
    <script>
        let d1 = document.getElementById("d1");
        // 鼠标按下
        d1.onmousedown = function(e){
            console.log("mousedown",e.type,e.target);
            console.log("this:",this);
        }
        // 鼠标按键弹起
        d1.onmouseup = function(){
            console.log("mouseup");
        }
        // 鼠标进入，如果有子元素，或导致父元素的mouseover事件反复触发
        d1.onmouseover = function(e){
            console.log("mouseover",e.x,e.y);
        }
        // 鼠标离开，如果有子元素，或导致父元素的mouseout事件反复触发
        d1.onmouseout = function(){
            console.log("mouseout");
        }
        // 鼠标进入，子元素不会导致该事件的反复触发
        d1.onmouseenter = function(){
            console.log("mouseenter");
        }
        // 鼠标离开，子元素不会导致该事件的反复触发
        d1.onmouseleave = function(){
            console.log("mouseleave");
        }
        // 鼠标移动时触发
        d1.onmousemove = function(){
            console.log("mousemove");
        }
        
        let ipt = document.getElementById("ipt");
        ipt.onkeydown = function(e){
            console.log("键盘按下",e.keyCode);
        }
        ipt.onkeyup = function(e){
            console.log("按键弹起",e.keyCode);
        }
        ipt.onkeypress = function(e){
            console.log("按键按下并弹起",e.keyCode);
        }
        // 页面事件：
        // 页面加载：当页面加载完成后触发
        window.onload = function(){
            console.log("页面加载完成后");
        }
        // 页面滚动
        document.body.onscroll = function(e){
            console.log("页面滚动",e);
        }
        // 事件对象：所有的事件处理方法都可以得到一个事件对象event
        // 通用属性：
        // type：事件类型
        // target：事件源
        // this：在事件回调函数中表示当前事件源对象，和target一样。
        // 鼠标事件对象：
        // x：表示鼠标相对于页面左边的位置
        // y：表示鼠标相对于页面顶部的位置
        // 键盘事件对象：
        // keyCode：在keyDown和keyUp事件中表示键值码
        // 在keyPress事件中表示字符码
        // 键值码是指键盘的每个键对应的唯一值
        // 字符码跟键盘的按键无关，是每个字符对应的唯一值

        // event.stopPropagation：阻止事件冒泡
        // event.preventDefault：阻止事件默认行为
        
        // 事件委托：当元素触发事件时交给父元素进行处理的机制成为事件委托
        // 在事件委托的事件处理方法中，target表示触发事件的事件源对象
        // this表示处理事件的元素对象
    </script>
</body>
</html>